<template>
	<view class="page-container">
		<view class="article-list">
			<my-list-item v-for="(item,index) in articleList" :artilce="item" :key="index" class="article-list-item"
				@click="handleArticleClick(item)" />

		</view>
		<uni-load-more :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	import {
		listNews
	} from '../../common/js/api/news'

	export default {
		data() {
			return {
				loadMoreStatus: 'more',
				articleList: [],
				queryParams: {
					title: '',
					pageNum: 1,
					pageSize: 10
				}
			}
		},
		onReachBottom() {
			this.getArticleList()
		},
		onLoad(options) {
			try {
				this.queryParams.title = options.title
				this.getArticleList()
			} catch (e) {
				uni.showModal({
					title: '提示信息',
					content: '请输入关键字'
				})
			}
		},
		methods: {
			getArticleList() {
				if (this.loadMoreStatus === 'no-more') return
				this.loadMoreStatus = "loading"
				listNews(this.queryParams).then(res => {
					console.log(res);
					if (res.code === 0) {
						if (res.data.list && res.data.list.length > 0) {
							this.articleList = this.articleList.concat(res.data.list)
						}
					}
					if (this.articleList.length >= res.data.total) {
						this.loadMoreStatus = "no-more"
					} else {
						this.queryParams.pageNum += 1
					}
				})
			}
		}
	}
</script>

<style scoped>
	.page-container {
		padding-bottom: 60px;
	}
</style>